<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0, user-scalable=0">
		<title>{{$info->title}}</title>
		<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
				-webkit-user-select: text;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}

			* {
				margin: 0;
				padding: 0
			}

			a {
				text-decoration: none;
				color: #555;
			}

			img {
				border: 0
			}

			body {
				height: 100%;
				font-family: PingFangSC, 'helvetica neue', 'hiragino sans gb', arial, 'microsoft yahei ui', 'microsoft yahei', simsun, sans-serif;
				overflow-x: hidden;
			}

			.video-list,
			.recommend-content {
				padding: 0 3%;
			}

			.video-title {
				width: 100%;
				height: 100%;
				font-size: 20px;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin: 10px 0 20px 0;
			}

			.user-info {
				display: flex;
			}

			.user-avatar {
				width: 44px;
				height: 44px;
				border-radius: 50%;
			}

			.user-list {
				margin-left: 10px;
			}

			.user-name {
				font-size: 18px;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.video-num {
				font-size: 15px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			.shareBtns {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 36px;
				margin-top: 25px;
			}

			.share {
				width: 160px;
				height: 40px;
				border-radius: 100px;
				float: right;
				text-align: center;
				line-height: 40px;
				background: #24b435;
				box-shadow: 0px 2px 6px 0px rgba(23, 163, 40, 0.47);
				font-size: 18px;
				padding: 0;
			}

			.animate {
				animation: scaleDraw 1s linear infinite;
			}

			@keyframes scaleDraw {
				0% {
					transform: scale(1);
				}

				25% {
					transform: scale(1.2);
				}

				50% {
					transform: scale(1);
				}

				75% {
					transform: scale(1.2);
				}
			}

			.share-txt {
				font-size: 20px;
				color: #ffffff;
				margin-left: 5upx;
			}

			.wx-haoyou {
				width: 22px;
				height: 20px;
				vertical-align: text-top;
			}

			.recom-title {
				width: 81px;
				font-size: 20px;
				font-weight: bold;
				color: rgba(215, 70, 67, 1);
				text-align: center;
				margin: 0 auto;
				padding-bottom: 7px;
			}

			.recom-video-list {
				display: flex;
				margin: 8px 0;
			}

			.recom-list-left {
				margin-right: 3%;
				position: relative;
				width: 43%;
				line-height: 0;
			}

			.recom-cover-img {
				width: 100%;
				height: 110px;
				line-height: 0;
			}

			.video-play {
				position: absolute;
				width: 27%;
				top: 34px;
				left: 37%;
			}

			.play-backgrount-time {
				position: absolute;
				bottom: 0;
				padding-left: 4%;
				height: 25px;
				line-height: 25px;
				font-size: 15px;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				width: 96%;
				background: linear-gradient(-360deg, rgba(51, 51, 51, 0.3), rgba(51, 51, 51, 0));
			}

			.recom-list-right {
				height: 110px;
				width: 54%;
			}

			.recom-list-title {
				width: 100%;
				height: 50px;
				font-size: 18px;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.recom-list-video-num {
				height: 15px;
				line-height: 15px;
				font-size: 15px;
				color: rgba(153, 153, 153, 1);
				margin-top: 42px;
			}
		</style>
		<style type="text/css">
			.down-to-phone-con, #program-code {
				width: 100%;
				height: 100%;
				position: fixed;
				background: rgba(0, 0, 0, 0.80);
				z-index: 1000;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.down-to-phone-txt-con {
				margin-top: 70px;
			}

			.down-to-phone-txt {
				font-size: 20px;
				color: #ffffff;
				font-weight: bold;
				line-height: 25px;
				text-align: center;
			}

			.down-to-phone-icon {
				position: absolute;
				width: 57px;
				height: 81px;
				top: 8px;
				right: 19px;
			}
		</style>

	</head>
	<body>
		<div id="app">
			@if($info)
			<div class="video">
				<video meted="meted" loop="loop" id="myVideo" controlslist="nodownload" width="100%"
				controls="controls" autoplay="autoplay" x5-playsinline="true" 
				playsinline="true" webkit-playsinline="true" >
					<source src="{{$info->video_url}}" type="video/mp4" />
				</video>
			</div>
			<div class="video-list">
				<div class="video-title">{{$info->title}}</div>
				<div class="user-info">
					<img class="user-avatar" src="{{$info->avatar}}">
					<div class="user-list">
						<div class="user-name">{{$info->author_name}}</div>
						<div class="video-num">人气{{$info->view_num}}</div>
					</div>
				</div>
				<div class="shareBtns">
					<div class="share">
						<img class="wx-haoyou" src="https://lzy-oss.oss-cn-huhehaote.aliyuncs.com/zhimei/images/wx-haoyou.png">
						<span class="share-txt">分享给好友</span>
					</div>
					<div class="share animate">
						<img class="wx-haoyou" src="https://lzy-oss.oss-cn-huhehaote.aliyuncs.com/zhimei/images/wx-haoyou.png">
						<span class="share-txt">分享到微信群</span>
					</div>
				</div>
			</div>
			<div style="width:100%;height:10px;background:rgba(242,242,242,1);margin: 20px 0;"></div>
			@endif
			@if($data)
			<div class="recommend-content">
				<div class="recom-title">热门推荐</div>
				@foreach($data as $video)
				<a href="/h5_videoinfo/{{$video->id}}">
					<div class="recom-video-list">
						<div class="recom-list-left">
							<img class="recom-cover-img" src="{{$video->img_url}}">
							<img class="video-play" src="https://lzy-oss.oss-cn-huhehaote.aliyuncs.com/zhimei/images/video-play.png">
							<div class="play-backgrount-time">{{$video->video_time}}</div>
						</div>
						<div class="recom-list-right">
							<div class="recom-list-title">{{$video->title}}</div>
							<div class="recom-list-video-num">人气{{$video->view_num}}</div>
						</div>
					</div>
				</a>
				@endforeach
			</div>
			@endif
			<!-- 引导分享 -->
			<div id="down-to-phone-con" class="down-to-phone-con">
				<div class="down-to-phone-txt-con">
					<div class="down-to-phone-txt">点击右上角的“...”</div>
					<div class="down-to-phone-txt">完成操作</div>
				</div>
				<img class="down-to-phone-icon" src="https://lzy-oss.oss-cn-huhehaote.aliyuncs.com/zhimei/images/share-yindao.png">
			</div>
			<!--二维码显示-->
			<div id="program-code" >
				<img style="width: 60%;position: fixed;top: 20%;left: 20%;" src="{{$info->code_img}}" >
				<img class="close-code" style="width: 10%;position: fixed;top: 67%;left: 45%;" src="https://lzy-oss.oss-cn-huhehaote.aliyuncs.com/zhimei/images/close-code.png" >
			</div>
		</div>


		<script type="text/javascript">
			var share_set = <?php echo $shareSet;?>;
			$('#myVideo').css('display', 'none');
			if(getQueryString('share')){
				// 显示二维码
				$('.down-to-phone-con').css('display', 'none');
				$('#program-code').css('display', 'block');
				var urls = window.location.href;
			}else{
				// 显示引导分享
				$('.down-to-phone-con').css('display', 'block');
				$('#program-code').css('display', 'none');
				var urls = window.location.href + '&share=1';
			}
			// 引导分享
			$('#down-to-phone-con').on('click', function() {
				$('#myVideo').css('display', 'block');
				$('.down-to-phone-con').css('display', 'none');
			});
			// 二维码
			$('.close-code').on('click', function(){
				$('#myVideo').css('display', 'block');
				$('#program-code').css('display', 'none');
			});
			$('.share').on('click', function(){
				$('#myVideo').css('display', 'none');
				$('.down-to-phone-con').css('display', 'block');
			});
			wx.config({
			  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			  appId: share_set.appId, // 必填，公众号的唯一标识
			  timestamp: share_set.timestamp, // 必填，生成签名的时间戳
			  nonceStr: share_set.nonceStr, // 必填，生成签名的随机串
			  signature: share_set.signature,// 必填，签名
			  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
			});
			wx.ready(function () {  //需在用户可能点击分享按钮前就先调用
			  wx.updateAppMessageShareData({ 
			    title: share_set.title, // 分享标题
			    desc: share_set.video_desc, // 分享描述
			    link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: share_set.share_img, // 分享图标
			    success: function (res) {
			      
			    }
			  });
			  wx.updateTimelineShareData({ 
			    title: share_set.title, // 分享标题
			    link: urls, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl:share_set.share_img, // 分享图标
			    success: function () {
			      // 设置成功
			    }
			  });
			});
			// 获取地址栏url特定参数
			function getQueryString(name){
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null)return  unescape(r[2]); return null;
			}
		</script>


	</body>

</html>
